<template>
	<view class="evaluation_item" :class="{'evaluation_item_noLine':index == 0}">
		<image class="evaluation_item_image" :src="item.userHeadImg" mode="aspectFill"></image>
		<view class="evaluation_item_info_box">
			<view class="evaluation_item_info_name_box">
				<text class="evaluation_item_info_name">{{ item.userNickName }}</text>
				<text class="evaluation_item_info_time">{{ item.createTimeStr }}</text>
			</view>
			<view class="evaluation_item_info_score_box">
				<view class="evaluation_item_info_score_stars" v-for="(childItem, childIndex) of scoreList" :key="childIndex">
					<image class="evaluation_item_info_score_stars_image" v-if="item.score >= childItem" src="../../static/icon/evaluation_star1.png" mode="aspectFill"></image>
					<image class="evaluation_item_info_score_stars_image" v-else src="../../static/icon/evaluation_star2.png" mode="aspectFill"></image>
				</view>
				<text class="evaluation_item_info_score">{{ item.score.toFixed(1) }}分</text>
			</view>
			<text class="evaluation_item_info_content_box">{{ item.content }}</text>
			<view class="evaluation_item_info_picture_box" v-if="item.imgs && item.imgs.length > 0">
				<image
					v-for="(imgsItem, imgsIndex) of item.imgs"
					:key="imgsIndex"
					@click="onPreviewImage(imgsIndex, item.imgs)"
					:src="imgsItem"
					class="evaluation_item_info_picture_image"
					:class="{'evaluation_item_info_picture_image_nth3': (imgsIndex + 1) % 3 == 0}"
					mode="aspectFill"
				></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		index: {
			type: Number,
			default() {
				return 0;
			}
		}
	},
	data(){
		return {
			scoreList:[1,2,3,4,5]
		}
	},
	methods: {
		// 图片预览的方法
		onPreviewImage(index, imgs) {
			if (imgs && imgs instanceof Array && imgs.length > 0) {
				uni.previewImage({
					current: imgs[index],
					urls: imgs
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
.evaluation_item_noLine {
	border-top-width: 0;
	border-top-color: #efefef;
	border-top-style: solid;
}
.evaluation_item_image {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.evaluation_item_info_box {
	width: 100%;
}
.evaluation_item_info_name_box {
	/* #ifdef APP-NVUE */
	flex-direction: row;
	/* #endif */
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: space-between;
	align-items: center;
}
.evaluation_item_info_name {
	font-size: 26rpx;
	color: #333333;
}
.evaluation_item_info_time {
	font-size: 24rpx;
	color: #999999;
}
.evaluation_item_info_score_box {
	/* #ifdef APP-NVUE */
	flex-direction: row;
	/* #endif */
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: flex-start;
	align-items: center;
	margin-top: 19rpx;
}
.evaluation_item_info_score {
	margin-left: 20rpx;
	font-size: 20rpx;
	color: #333333;
}
.evaluation_item_info_score_stars {
	margin-right: 5rpx;
}
.evaluation_item_info_score_stars_image {
	width: 27rpx;
	height: 26rpx;
}
.evaluation_item_info_content_box {
	margin-top: 19rpx;
	font-size: 24rpx;
	color: #333333;
}
.evaluation_item_info_picture_box {
	margin-top: 19rpx;
	/* #ifdef APP-NVUE */
	flex-direction: row;
	/* #endif */
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.evaluation_item_info_picture_image {
	width: 185rpx;
	height: 185rpx;
	border-radius: 4rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.evaluation_item_info_picture_image_nth3 {
	margin-right: 0;
}
.evaluation_item {
	padding: 30rpx 30rpx;
	/* #ifdef APP-NVUE */
	flex-direction: row;
	/* #endif */
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: space-between;
	align-items: flex-start;
	background-color: #ffffff;
}
</style>